<template>
	<!-- 我的借阅 -->
	<view class="sharedBookstore_Borrowingbox">
		<view
			class="w-full px-4 h-[60rpx] box-border justify-between items-center"
			style="display: flex; justify-content: flex-start"
		>
			<view
				class="text-[36rpx] w-[auto] mr-[60rpx] text-center relative font-bold"
				:style="currentind == 0 ? 'color: #34a4e2;' : ''"
				@tap="changePage(0)"
			>
				借阅中
				<text
					class="w-[29rpx] h-[10rpx] rounded-[5rpx] absolute left-[50%] -translate-x-[50%] -bottom-[10rpx]"
					:style="'background: #34a4e2'"
					v-if="currentind == 0"
				></text>
			</view>
			<view
				class="text-[36rpx] w-[auto] mr-[60rpx] text-center relative font-bold"
				style="color: #303030"
				:style="currentind == 1 ? 'color: #34a4e2;' : ''"
				@tap="changePage(1)"
			>
				已还书
				<text
					class="w-[29rpx] h-[10rpx] rounded-[5rpx] absolute left-[50%] -translate-x-[50%] -bottom-[10rpx]"
					:style="'background: #34a4e2'"
					v-if="currentind == 1"
				></text>
			</view>
		</view>
		<!-- 借阅中 -->
		<view
			class="w-full px-4 mt-[14rpx] box-border justify-between items-center pb-[20rpx]"
			style="display: block"
			v-if="type == 1"
		>
			<scroll-view
				class="w-full h-full box-border"
				scroll-y
				v-if="thisPage === 1 && list.length"
				@scrolltolower="scrolltolower"
			>
				<view
					class="w-full rounded-[30rpx] m-t[40rpx] box-border bg-white plan-item pt-[20rpx] pb-[27rpx] pl-[30rpx]"
					style="display: block; float: left"
					v-for="(item, index) in list"
					:key="item.book_id"
				>
					<view class="sharedBookstore_Borrowing_topBox">
						<view class="sharedBookstore_Borrowing_topBox_left"> 《{{ item.book_name }}》 </view>
						<view class="sharedBookstore_Borrowing_topBox_right">
							<!-- 领取样式 -->
							<view
								class="sharedBookstore_Borrowing_topBox_right_cont1"
								v-if="item.book_integral == 0"
								@tap="getIntegral(index)"
								>领取 {{ item.single_book_integral }}积分</view
							>
							<!-- 已领取样式 -->
							<view
								class="sharedBookstore_Borrowing_topBox_right_cont2"
								v-if="item.book_integral != 0"
								>积分已领取</view
							>
						</view>
					</view>
					<view class="sharedBookstore_Borrowing_bottomBox">
						<image
							:src="baseImg + '/BorrowingCard/sharedBookstore.png'"
							class="sharedBookstore_Borrowing_bottomBox_img"
							mode="scaleToFill"
						/>
						<view class="sharedBookstore_Borrowing_bottomBox_textBox mr-[30rpx]">
							<text class="text-[30rpx] text-[#919191]">{{ item.borrow_time }}</text>
							<text class="ml-[20rpx] text-[30rpx] text-[#36A7E2]">借入</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<no-page
				v-if="(thisPage === 0 || (thisPage === 1 && !list.length)) && type == 1"
				height="100%"
				:type="thisPage === 0 ? 'btn' : 'msg'"
				:title="title"
				:btnTitle="btnTitle"
				@click="retry"
			></no-page>
		</view>
		<!-- 已还书 -->
		<view
			class="w-full px-4 mt-[14rpx] box-border justify-between items-center pb-[20rpx]"
			v-if="type == 2"
		>
			<scroll-view
				class="w-full h-full box-border"
				scroll-y
				v-if="thisPage === 1 && list.length"
				@scrolltolower="scrolltolower"
			>
				<view
					class="w-full rounded-[30rpx] m-t[40rpx] box-border bg-white plan-item pt-[20rpx] pb-[27rpx] pl-[30rpx]"
					style="display: block; float: left"
					v-for="(item, index) in list"
					:key="item.book_id"
				>
					<view class="sharedBookstore_Borrowing_topBox">
						<view class="sharedBookstore_Borrowing_topBox_left"> 《{{ item.book_name }}》 </view>
						<view class="sharedBookstore_Borrowing_topBox_right">
							<!-- 领取样式 -->
							<view
								class="sharedBookstore_Borrowing_topBox_right_cont1"
								v-if="item.book_integral == 0"
								@tap="getIntegral(index)"
								>领取 {{ item.single_book_integral }}积分</view
							>
							<!-- 已领取样式 -->
							<view
								class="sharedBookstore_Borrowing_topBox_right_cont2"
								v-if="item.book_integral != 0"
								>积分已领取</view
							>
						</view>
					</view>
					<view class="sharedBookstore_Borrowing_bottomBox">
						<image
							:src="baseImg + '/BorrowingCard/sharedBookstore.png'"
							class="sharedBookstore_Borrowing_bottomBox_img"
							mode="scaleToFill"
						/>
						<view class="sharedBookstore_Borrowing_bottomBox_textBox mr-[30rpx]">
							<text class="text-[30rpx] text-[#919191]">{{ item.borrow_time }}</text>
							<text class="ml-[20rpx] text-[30rpx] text-[#36A7E2]">借入</text>
						</view>
						<view class="sharedBookstore_Borrowing_bottomBox_textBox">
							<text class="text-[30rpx] text-[#919191]">{{ item.return_time }}</text>
							<text class="ml-[20rpx] text-[30rpx] text-[#36A7E2]">归还</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<no-page
				v-if="(thisPage === 0 || (thisPage === 1 && !list.length)) && type == 2"
				height="100%"
				:type="thisPage === 0 ? 'btn' : 'msg'"
				:title="title"
				:btnTitle="btnTitle"
				@click="retry"
			></no-page>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { getIntegralApi, getRecordsList } from '@/service/shareBookStore';
import { useUserStore } from '@/store';
import { storeToRefs } from 'pinia';

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

const props = defineProps({
	currentindex: {
		type: Number,
		default: 0,
	},
});

const title = ref('');
const btnTitle = ref('重试');
const thisPage = ref(-1);
const page = ref({ number: 1, size: 10 });
const hasMore = ref(true);
const list = ref([]);
const type = ref(1);

onShow(() => {
	if (props.currentindex === 2) return;
	getList();
});

const scrolltolower = () => {
	if (!hasMore.value) return;
	page.value.number++;
	getList();
};

const getList = async () => {
	uni.showLoading({ title: '加载中...' });
	try {
		const res = await getRecordsList({
			student_id: userInfo.value.student_id,
			type: type.value,
			page: page.value.number,
			pagesize: page.value.size,
		});
		uni.hideLoading();
		if (res.status_code === 200 && res.data) {
			thisPage.value = 1;
			list.value =
				page.value.number === 1 ? res.data.book_list : [...list.value, ...res.data.book_list];
			if (res.data.book_list.length < page.value.size) {
				hasMore.value = false;
			}
			if (!list.value.length) {
				title.value = '暂无数据';
			}
		} else {
			thisPage.value = 0;
			title.value = res.message;
			if (title.value === '学生未绑定借阅卡') {
				btnTitle.value = '去绑卡';
			}
		}
	} catch (error) {
		console.log('====>getListError', error);
		uni.hideLoading();
		thisPage.value = 0;
		title.value = '服务器异常';
	}
};

const emit = defineEmits(['bindCard']);
const retry = () => {
	if (title.value === '学生未绑定借阅卡') {
		emit('bindCard');
		return;
	}
	hasMore.value = true;
	page.value = { number: 1, size: 10 };
	getList();
};

const currentind = ref(0);
const changePage = (index: number) => {
	currentind.value = index;

	if (index === 0) {
		type.value = 1;
	} else {
		type.value = 2;
	}
	list.value = [];
	hasMore.value = true;
	page.value = { number: 1, size: 10 };
	getList();
};

const getIntegral = async (index: any) => {
	uni.showLoading({
		title: '加载中...',
	});
	try {
		const res = await getIntegralApi({
			student_id: userInfo.value.student_id,
			book_id: list.value[index].book_id,
			type: type.value,
			code: list.value[index].code,
		});
		uni.hideLoading();
		if (res.status_code === 200 && res.data) {
			uni.showToast({
				title: '领取成功',
				icon: 'none',
			});
			list.value[index].book_integral = 1;
		}
	} catch (error) {
		uni.hideLoading();
	}
};
defineExpose({
	getList,
});
</script>

<style lang="scss" scoped></style>
